<template>
  <div class="custom-table-container">
    <vab-list-notice :content-array="contentArray" />
    <el-table v-loading="listLoading" :data="list">
      <el-table-column
        align="center"
        label="红娘"
        prop="username"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="名下客源"
        prop="data1"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="从未根据"
        prop="data2"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="超3天未跟进"
        prop="data3"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="超7天未跟进"
        prop="data4"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="超15天未跟进"
        prop="data5"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="超30天未跟进"
        prop="data6"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="跟进总条数"
        prop="data7"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="本月根据条数"
        prop="data8"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>

<script>
  import VabListNotice from '@/plugins/VabListNotice'
  import { getCustomReport } from '@/api/custom'

  export default defineComponent({
    name: 'CustomTable',
    components: { VabListNotice },
    setup() {
      const state = reactive({
        border: true,
        list: [],
        listLoading: true,
        contentArray: [
          '公海客源是指您广泛通过各种渠道获取到的单身潜在客户基本信息以快速便捷的形式收集汇总到本系统中，方便销售或红娘进行査阅、跟进和管理;',
          '由平台工作人员/销售/红娘对所分派的客户资源进行跟进服务，根据业务进展情况可将客户资料一健入库转入到正式的会员资料中并自动注册用户;',
          '入库的客户信息在本页面中仅做记录查询，请在会员资料中管理，本页不再提供编辑和任何操作;制除客源记录不影响会员资料中的数据。',
        ],
      })

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { list },
        } = await getCustomReport()
        state.list = list
        state.listLoading = false
      }

      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        fetchData,
      }
    },
  })
</script>

<style lang="scss" scoped>
  @use 'sass:math';

  .custom-table-container {
    :deep() {
      i {
        cursor: pointer;
      }
    }

    .right-panel {
      .stripe-panel,
      .border-panel {
        margin: 0 10px #{math.div($base-margin, 2)} 10px !important;

        :deep() {
          .el-checkbox__label {
            margin-left: 0 !important;
          }
        }
      }

      [class*='ri'] {
        font-size: $base-font-size-big;
        color: var(--el-color-black);
      }
    }
  }
</style>
<style lang="scss"></style>
